import React from "react";
import emplcss from "@/assets/css/empl.module.less";
import IntCom from "@/components/Bigscreen/empl/IntCom";
import { Input, Cascader, Button } from "antd";
import type { CascaderProps } from "antd";
interface Option {
  value: string;
  label: string;
  children?: Option[];
}
const options: Option[] = [
  {
    value: "江西",
    label: "江西",
  },
  {
    value: "北京",
    label: "北京",
  },
];
const options2: Option[] = [
  {
    value: "网站工程",
    label: "网站工程",
  },
  {
    value: "大数据",
    label: "大数据",
  },
];
const options3: Option[] = [
  {
    value: "江西",
    label: "江西",
    children: [
      {
        value: "景德镇",
        label: "景德镇",
        children: [
          {
            value: "乐平市",
            label: "乐平市",
          },
        ],
      },
    ],
  },
  {
    value: "北京",
    label: "北京",
  },
];
const onChange: CascaderProps<Option>["onChange"] = (value) => {
  console.log(value, "value");
};
function Intellect() {
  return (
    <div className={emplcss.box}>
      <div className={emplcss.header_seach}>
        <div>检测人员姓名 :</div>
        <div className={emplcss.seach}>
          <Input placeholder="请输入人员姓名" />
        </div>
        <div className={emplcss.Three_stage_linkage}>
          <div className={emplcss.marketplace}>
            检测区域 :{" "}
            <Cascader
              options={options}
              onChange={onChange}
              placeholder="请选择"
            />
          </div>
          <div className={emplcss.college}>
            检测环境 :{" "}
            <Cascader
              options={options2}
              onChange={onChange}
              placeholder="请选择"
            />
          </div>
          <div className={emplcss.college}>
            用水检测 :{" "}
            <Cascader
              options={options3}
              onChange={onChange}
              placeholder="请选择"
            />
          </div>
          <div style={{ marginLeft: "50px" }}>
            <Button type="primary">查询</Button>
          </div>
        </div>
      </div>
      {/* Table表格 */}
      <div className={emplcss.Tabhead}>
        <Button type="primary" style={{marginLeft:"10px"}}>新增检测人员</Button>
        <Button type="primary" style={{marginLeft:"10px"}}>批量删除</Button>
      </div>
      <div className={emplcss.tables}>
        <IntCom></IntCom>
      </div>
    </div>
  );
}

export default Intellect;

